<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link th:href="@{css/main.css}" rel="stylesheet"/>
    <link th:href="@{css/bootstrap5.css}" rel="stylesheet"/>
    <title>XiaoRan-Robot</title>
</head>

<body>

<div class="d-flex text-white topBg align-items-center justify-content-center">
    <h4>XiaoRan-Robot</h4>
</div>
<div class="text-center mt-3">
    <button aria-controls="leftSection" class="btn btn-outline-primary btn-md" data-bs-target="#leftSection"
            data-bs-toggle="offcanvas" id="startBtn">开始配置
    </button>
</div>
<div aria-labelledby="leftSectionLabel" class="offcanvas offcanvas-bottom off" id="leftSection" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="leftSectionLabel">配置中心</h5>
        <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
    </div>
    <div class="offcanvas-body">
        <div class="container">
            <div class="accordion accordion-flush" id="accordionFlushExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingOne">
                        <button aria-controls="flush-collapseOne" aria-expanded="false" class="accordion-button collapsed"
                                data-bs-target="#flush-collapseOne" data-bs-toggle="collapse"
                                type="button">
                            主人QQ
                        </button>
                    </h2>
                    <div aria-labelledby="flush-headingOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"
                         id="flush-collapseOne">
                        <div class="accordion-body">主人QQ唯一且拥有所有操作权限，仅可在程序中修改 yml 文件进行设置。</div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingTwo">
                        <button aria-controls="flush-collapseTwo" aria-expanded="false" class="accordion-button collapsed"
                                data-bs-target="#flush-collapseTwo" data-bs-toggle="collapse"
                                type="button">
                            授权管理
                        </button>
                    </h2>
                    <div aria-labelledby="flush-headingTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"
                         id="flush-collapseTwo">
                        <div class="accordion-body">授权列表中的QQ、QQ群中的消息才会被机器人响应</div>
                        <button class="btn btn-success w-100 btn-sm" data-bs-dismiss="offcanvas" data-bs-target="#addAuth"
                                data-bs-toggle="modal">添加授权
                        </button>
                        <div class="table-responsive">
                        <table class="table text-nowrap text-center">
                            <tr>
                                <th>编号</th>
                                <th>类型</th>
                                <th>QQ号</th>
                                <th>群号</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            <tr class="table-primary">
                                <td>10001</td>
                                <td>好友</td>
                                <td>2897406734</td>
                                <td>-</td>
                                <td>已激活</td>
                                <td>删除|修改</td>
                            </tr>
                            <tr>
                                <td>10002</td>
                                <td>群组</td>
                                <td>-</td>
                                <td>47563465</td>
                                <td>已激活</td>
                                <td>删除|修改</td>
                            </tr>
                        </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="flush-headingThree">
                    <button aria-controls="flush-collapseThree" aria-expanded="false" class="accordion-button collapsed"
                            data-bs-target="#flush-collapseThree" data-bs-toggle="collapse"
                            type="button">
                        词库管理
                    </button>
                </h2>
                <div aria-labelledby="flush-headingThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"
                     id="flush-collapseThree">
                    <button class="btn btn-success w-100 btn-sm" data-bs-dismiss="offcanvas" data-bs-target="#addKeywordsModal"
                            data-bs-toggle="modal">添加关键词
                    </button>
                    <button class="btn btn-success w-100 btn-sm mt-1" onclick="refreshDicts()">同步到机器人词库
                    </button>
                    <small class="text-center">在新增删除修改词库之后同步到机器人词库后方可生效</small>
                    <div class="table-responsive">
                    <table class="table text-nowrap text-center">
                        <tr>
                            <th>编号</th>
                            <th>关键词</th>
                            <th>回复内容</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <tr th:each="item : ${dataDicts}">
                            <td th:text="${item.id}">10002</td>
                            <td th:text="${item.dictKey}">xiaoran</td>
                            <td th:text="${item.dictVal}">xiaoran是我的主人</td>
                            <td th:if="${item.status} eq 1" class="text-success">已启用</td>
                            <td th:if="${item.status} eq 0" class="text-danger">已启用</td>
                            <td>
                                <button class="btn btn-outline-danger btn-sm" th:onclick="|delDict(${item.id})|">删除</button>
                                <button class="btn btn-outline-info btn-sm ml-1" th:onclick="|updateDict(${item.id})|" data-bs-dismiss="offcanvas" data-bs-target="#addKeywordsModal"
                                        data-bs-toggle="modal">修改</button>
                            </td>
                        </tr>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 关键词新增/修改 -->
<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="addKeywordsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title" id="exampleModalLabel">关键词添加</span>
                <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
            </div>
            <div class="modal-body">
                <div class="input-group input-group-sm mb-3">
                    <span class="input-group-text">关键词</span>
                    <label for="keywords"></label>
                    <input class="form-control" id="keywords" type="text">
                </div>
                <div class="input-group input-group-sm">
                    <span class="input-group-text">回复内容</span>
                    <label for="content"></label>
                    <textarea class="form-control" id="content"></textarea>
                    <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        注意事项
                    </button>
                    <div class="collapse" id="collapseExample">
                        <p>
                            <small class="text-muted">
                                注意：指定处理指令的类用双#包裹类名，例如：#Cos# ，即为让Cos类处理指定的关键词<br/>
                            </small>
                            <small class="text-danger">
                                高级用法：你可以在此处填写标准的无语法错误的Json（可多级嵌套），例如：<br/>
                                <code>
                                    {<br/>
                                        "小姐姐": "Plmm",<br/>
                                        "小哥哥": "Sqgg",<br/>
                                        "功能": {<br/>
                                                    "签到": "此功能暂未开发",<br/>
                                                    "笑话": "没有笑话"<br/>
                                                }<br/>
                                    }<br/>
                                </code>
                                假如你的关键词是 "菜单"，那么机器人收到"菜单“的指令时，会拼接回复对应的键：小姐姐|小哥哥|功能
                            </small>
                        </p>
                    </div>
                </div>
                <div class="mt-1 mb-2">
                    <label for="activeType"></label>
                        <select class="form-select form-select-sm" id="activeType">
                            <option selected>选择类型</option>
                            <option value="1">需要激活条件</option>
                            <option value="0">无需激活条件</option>
                        </select>
                    <small class="text-muted">激活条件：当被艾特或者消息前加指定前缀的消息才被处理</small>
                </div>
                <div class="form-check form-switch" id="switchDicts">
                    <input checked class="form-check-input" id="flexSwitchCheckDefault" type="checkbox">
                    <label class="form-check-label" for="flexSwitchCheckDefault">启用</label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-outline-primary btn-sm" type="button" id="submitDictsForm" data-bs-dismiss="modal">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 授权新增 -->
<div class="modal fade" id="addAuth" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">添加授权</span>
                <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="authType"></label>
                        <select class="form-select form-select-sm" id="authType">
                            <option selected>选择类型</option>
                            <option value="1">好友</option>
                            <option value="2">群组</option>
                        </select>
                    <small class="text-muted">机器人只会响应被授权的好友或群组</small>
                </div>
                <div class="input-group input-group-sm mb-3">
                    <span class="input-group-text">QQ</span>
                    <label for="qid"></label>
                        <input class="form-control" id="qid" type="text">
                </div>
                <div class="input-group input-group-sm mb-3">
                    <span class="input-group-text">群号</span>
                    <label for="gid"></label>
                        <input class="form-control" id="gid" type="text">
                </div>
                <div class="form-check form-switch">
                    <input checked class="form-check-input" id="swithForAuth" type="checkbox">
                    <label class="form-check-label" for="swithForAuth">启用</label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-outline-primary btn-sm" type="button">添加</button>
            </div>
        </div>
    </div>
</div>
<!--通知-->
<div class="modal fade" id="notice" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">通知</span>
                <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
            </div>
            <div class="modal-body">
                <span id="noticeContent"></span>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal" type="button" onclick="reload()">关闭</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{js/jquery3.js}"></script>
<script>
    $("#submitDictsForm").click(function () {
        var data = {
            "dictKey": $("input[id='keywords']").val(),
            "dictVal": $("#content").val(),
            "type": $("#activeType option:selected").val(),
            "status": $("#flexSwitchCheckDefault").is(':checked') === true ? 1:0
        }
        let actionType = $("#submitDictsForm").val === '添加' ? '/addKeywords' : '/updateDict';
        $.post(actionType, data, function (data) {
            // 打开 offcanvas
            if(data){
                // alert
                $("#noticeContent").text("操作成功")
                new bootstrap.Modal(document.getElementById('notice')).show()
            } else {
                $("#noticeContent").text("操作失败，原因未知")
                new bootstrap.Modal(document.getElementById('notice')).show()
            }
        })
    })
    window.onload = function(){
        var myOffcanvas = document.getElementById('leftSection')
        var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
        bsOffcanvas.show(myOffcanvas)
 　　}
 function reload() {
     location.reload();
 }
 function refreshDicts() {
    $.get("/refreshDicts")
     $("#noticeContent").text("已同步至机器人词库")
     new bootstrap.Modal(document.getElementById('notice')).show()
 }
 function delDict(id){
        $.post('/delDict', "id="+id, function(data){
            reload()
        })
    }
function updateDict(id){
    // 修改 modal部分文字显示
    $("#exampleModalLabel").text('关键词修改')
    $("#submitDictsForm").text('修改')
    $.get('/getDict', 'id='+id, function (data) {
        let dictKey = data.dictKey;
        let dictVal = data.dictVal;
        let status = data.status;
        let type = data.type;
        $("#keywords").val(dictKey);
        $("#content").val(dictVal);
        $("#flexSwitchCheckDefault").attr("selected", Boolean(status))
        $("#activeType").val(type)
    })
}
</script>
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script th:src="@{js/bootsrapBundle.js}"></script>
</body>
</html>
